<template>
  <div class="w-full h-full mt-10">
    <vue-ueditor-wrap
      v-model="content"
      :editor-id="id"
      :editorDependencies="['ueditor.config.js', 'ueditor.all.js']"
      :config="editorConfig"
      style="width: 500px; height: auto"
    ></vue-ueditor-wrap>
  </div>
</template>

<script setup>
const emit = defineEmits(['input'])

const props = defineProps(['modelValue', 'height'])

const id = Math.random().toString(36).substring(2, 15) + '-ueditor-' + +new Date()

const content = ref('')
const editorConfig = reactive({
  UEDITOR_HOME_URL: '/UEditor/',
  autoHeightEnabled: true,
  toolbars: [
    ['source', 'undo', 'redo', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'forecolor', 'backcolor']
  ]
})

const myEditor = ref()

nextTick(() => {
  setTimeout(() => {
    myEditor.value = window.UE.getEditor(id)
  }, 200)
})

const initContent = computed(() => {
  return props.modelValue
})

watch(
  initContent,
  (newVal) => {
    content.value = newVal
  },
  { deep: true, immediate: true }
)

watch(
  content,
  (newVal) => {
    emit('input', newVal)
  },
  { deep: true }
)
</script>
<style scoped lang="scss"></style>
